<template>
  <div class="successpay" v-if="orderInfo.length != 15">
    <!-- {{orderInfo.add_time_y}} -->
    <div class="success-box">
      <div class="success-icon" v-if="orderInfo._status._type == 1">
        <van-icon name="success" />
      </div>
      <div class="cross-icon" v-if="orderInfo._status._type == 0">
        <van-icon name="cross" />
      </div>
      <div class="success-title" v-if="orderInfo._status._type == 1">
        订单支付成功
      </div>
      <div class="success-title" v-if="orderInfo._status._type == 0">
        订单支付失败
      </div>
      <div class="success-main">
        <div class="success-list">
          <div class="title">订单编号</div>
          <div class="info">{{ orderInfo.order_id }}</div>
        </div>
        <div class="success-list">
          <div class="title">下单时间</div>
          <div class="info">{{ orderInfo._pay_time }}</div>
        </div>
        <div class="success-list">
          <div class="title">支付方式</div>
          <div class="info">{{ orderInfo._status._payType }}</div>
        </div>
        <div class="success-list">
          <div class="title">支付金额</div>
          <div class="info">{{ orderInfo.pay_price }}</div>
        </div>
      </div>
      <div class="success-order">
        <router-link
          :to="{ path: '/watchorder', query: { orderInfo: orderInfo,status: orderInfo._status._type} }"
          >查看订单</router-link
        >
      </div>
      <div class="success-back"><router-link to="/">返回首页</router-link></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SuccessPay",
  data() {
    return {
      orderInfo: this.$route.query.orderinfo,
    };
  },
  props: {
    orderinfo: Object,
  },
  methods: {},
  created() {
    if (this.$route.query.orderinfo.length == 15) {
      this.$router.push("/cart");
    }
  },
};
</script>

<style lang="less">
.successpay {
  height: 100vh;
  width: 100vw;
  background-color: #f5f5f5;
  padding-top: 6rem;
  text-align: center;
  box-sizing: border-box;
  .success-box {
    background-color: white;
    height: 23rem;
    width: 21rem;
    margin: 0rem auto;
    position: relative;
    padding: 3rem 1rem 1.5rem;
    box-sizing: border-box;
    .success-icon,
    .cross-icon {
      height: 4rem;
      width: 4rem;
      border-radius: 50%;
      background-color: #e93323;
      color: white;
      font-size: 3rem;
      line-height: 5.3rem;
      position: absolute;
      top: -2rem;
      left: 50%;
      margin-left: -2rem;
    }
    .cross-icon {
      background-color: #878787;
    }
    .success-title {
      margin-bottom: 1rem;
    }
    .success-main {
      margin-bottom: 1rem;
      padding-top: 1rem;
      padding-bottom: 1rem;
      border-top: 0.08rem solid #eaeaea;
      border-bottom: 0.08rem solid #eaeaea;
      font-size: 0.9rem;
      .success-list {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.5rem;
        .title {
        }
        .info {
          color: #747474;
        }
      }
    }
    .success-order,
    .success-back {
      padding: 0.5rem 0rem;
      border-radius: 5rem;
      border: 0.1rem solid #e93323;
    }
    .success-order {
      background-color: #e93323;
      margin-bottom: 0.7rem;
    }
    .success-order a {
      color: white;
    }
    .success-back {
      a{
        color: #e93323;
      }
    }
  }
  .van-submit-bar__button--danger {
    background: transparent;
  }
}
</style>